<template>
  <div>
    <!-- <input type="number" v-model.number="count" /> -->
    <!-- <input type="number" v-model.number="count.num" /> -->
    <input type="number" v-model.number="count" />
    <input type="text" v-model.number="title" />
  </div>
</template>

<script>
// watch监听给定的数据
import { ref, watch } from 'vue'
export default {
  setup() {
    // const count = ref(10)
    // const count = ref({ num: 200, title: 'aaa' })
    const count = ref(10)
    const title = ref('aaa')

    // 多用于ref基础类型
    // watch(count, (newValue, oldValue) => {
    //   console.log('更新了', newValue)
    // })

    // 多用于引用类型
    // watch(
    //   () => count.value.num,
    //   (newValue, oldValue) => {
    //     console.log('更新了', newValue)
    //   }
    // )
    // 如果参数1的数据为一个响应对象类型，要想监听到，则需要参数3
    // watch(
    //   count,
    //   (newValue, oldValue) => {
    //     console.log('更新了', newValue)
    //   },
    //   {
    //     deep: true,
    //     // 初始化就执行 -- 一般用不到
    //     immediate: true
    //   }
    // )

    // 监听多个数据  回调函数中的数据为一个数组
    watch([count, title], (newValue, oldValue) => {
      console.log('更新了', newValue)
    })

    return {
      count,
      title
    }
  }
}
</script>

<style lang="scss" scoped></style>
